<template>
  <br><br><br>
  <van-cell-group>
    <van-cell>
      <van-field label="表单名字" v-model="formname"></van-field>
    </van-cell>
    <van-cell @click="addItem" ><van-icon name="add"/>点击增加字段</van-cell>
    <template v-for="(item,index) in obj">
      <template v-if="item.exit">
        <van-cell>
          <van-icon name="clear" @click="subItem(index)" />
          <select  v-model="item.type_id" @change="sureType(item)" style="width: 80%">
            <template v-for="(item2,index2) in types">
              <option v-if="item2.isUse" :value="item2.id">{{item2.name}}</option>
            </template>
          </select>
          <van-radio-group v-model="item.required">
            <van-radio name="1">必填</van-radio>
            <van-radio name="2">非必填</van-radio>
          </van-radio-group>
          <van-field v-model="item.title" placeholder="请输入标题"></van-field>
        </van-cell>
        <van-cell>
          <template v-if="item.type=='date'">
            <van-datetime-picker
                v-model="item.value"
                type="datetime"
                :title="item.title"
                :min-date="mindate"
                :max-date="maxdate"
            />
          </template>
          <template v-if="item.type=='text'" >
            <van-field :label="item.title" autosize  v-model="item.value" type="textarea" placeholder="请输入文本内容"/>
          </template>
          <template v-if="item.type=='number'">
            <van-field v-model="item.number" type="number" :label="item.title" />
          </template>
        </van-cell>

      </template>

    </template>
    <van-cell><van-button size="large" @click="postToServer">提交</van-button></van-cell>
  </van-cell-group>
  <br><br><br>
</template>
<script lang="ts">
import {reactive, ref} from 'vue';
import {Notify} from "vant";
import {Schema} from "../../../lib/schemaType"
import {uiType} from "@/lib/uiInterface";
import {useRouter} from "vue-router";

export default {
  setup(){
    const obj:uiType[] = reactive([]);
    const router = useRouter();
    if(!router.currentRoute.value.query.clubID||!router.currentRoute.value.query.type){
      Notify("系统错误，三秒后跳转至个人页面");
      setTimeout(()=>{
        router.push({path:'/owner'});
      },3000)

    }
    let cnt = 0;
    const formname = ref('');
    const mindate=new Date(1900,0,0);
    const maxdate=new Date(2100,0,0);
    const types=reactive([
      {
        id:0,
        name:'date',
        description:'日期',
        isUse:true,
      },
      {
        id:1,
        name:'text',
        description:'文本',
        isUse:true,
      },
      {
        id:2,
        name:'number',
        description:'数字',
        isUse:true,
      },
      {
        id:3,
        name:'radio',
        description: '暂时没用到的复选框',
        isUse:false,
      },
      {
        id:4,
        name:'array',
        description: '数组',
        isUse: false,
      }
    ])
    const addItem=function (){
      obj.push({
        type:'text',
        type_id:1,
        value:'',
        id:cnt++,
        exit:true,
        title:'',
        required:'2'
      })
      sureType(obj[obj.length-1])
    };
    const subItem = function (index:number){
      obj[index].exit=false;
    }
    const sureType=function (item:uiType){
      item.type = types.filter(key=>key.id==item.type_id)[0].name;
      Notify("选择类型为"+item.type+"|"+types.filter(key=>key.id==item.type_id)[0].description)
      if(item.type=='date'){
        item.value=new Date();
      }else if(item.type=='text'){
        item.value='';
      }else if(item.type=='number'){
        item.value=0;
      }else if(item.type=='array'){
        // item.value=[];
      }
      item.title='请输入标题'
    }
    const postToServer=function (){
      let propertie:any = {};
      obj.forEach(e=>{
        if(e.exit){
          propertie[e.type+e.id]={};
          if(e.type=='text'){
            propertie[e.type+e.id]['type']='string';
            propertie[e.type+e.id]['title']=e.title;
          }else if(e.type=='date'){
            propertie[e.type+e.id]['type']='string';
            propertie[e.type+e.id]['format']='date';
            propertie[e.type+e.id]['title']=e.title;
          }else if(e.type=='number'){
            propertie[e.type+e.id]['type']='number';
            propertie[e.type+e.id]['title']=e.title;
          }
        }
      })
      // console.log(propertie);
      let sendobj:Schema = {
        type:"object",
        required:obj.filter( item=>item.required=='1').map(item=>item.type+item.id),
        properties:propertie
      }
      console.log(JSON.stringify(sendobj));
      fetch("api/club/"+router.currentRoute.value.query.clubID+"/form/",{
        method:"post",
        headers:{
          "content-type":'application/json'
        },
        body:JSON.stringify({
          allow_repeat: true,
          allow_rewrite: true,
          description: "string",
          title: formname.value,
          type: router.currentRoute.value.query.type=='new'?0:1,
          value: sendobj
        })
      }).then(res=>{
        if(res.status!=200){
          Notify("错误")
        }else{
          return res.json()
        }
      }).then(json=>console.log(json))
    }
    return {
      obj,addItem,subItem,types,sureType,mindate,maxdate,postToServer,formname
    }
  }
}
</script>

<style scoped>

</style>